<template>
    <div id="information">
        <div id="info">
            <h1>用户信息</h1>
            <el-avatar :src="imageUrl"></el-avatar>
            <div id="player">
                <span><h2>昵称:{{user.name}}</h2></span>
                <span><h2>性别:{{user.gender}}</h2></span>
                <span><h2>年龄:{{user.age}}</h2></span>
                <span><h2>个性签名:{{user.signature}}</h2></span>
                <span><h2>邮箱:{{user.email}}</h2></span>
                <span><h2>电话:{{user.phone}}</h2></span>
                <span><h2>常用地址:{{user.address1}}</h2></span>
                <span><h2>备用地址:{{user.address2}}</h2></span>
            </div>
        </div>
        <el-button type="primary" round @click="open">修改信息</el-button>
        <el-button type="primary" round @click="exit">删除信息</el-button>
        <el-button type="primary" round @click="back">保存并返回</el-button>
        <div class="modal" v-show="showModal">
          <div class="modal-background"></div>
            <div class="modal-content">
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <input type="file" accept="image/*" @change="handleFileChange">
                    <img :src="imageUrl" alt="avatar" style="width:20px;height: 20px;">
                    <el-form-item label="昵称" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="name">
                      <el-input v-model="ruleForm.gender"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="name">
                      <el-input v-model="ruleForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="个性签名" prop="name">
                      <el-input v-model="ruleForm.signature"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="name">
                      <el-input v-model="ruleForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="name">
                      <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="常用地址" prop="name">
                      <el-input v-model="ruleForm.address1"></el-input>
                    </el-form-item>
                    <el-form-item label="备用地址" prop="name">
                      <el-input v-model="ruleForm.address2"></el-input>
                    </el-form-item>
                    <el-button type="primary" round @click="change">确认修改</el-button>
                  </el-form>
                </div>
        </div>
    </div>
</template>
  
<script>
import axios from 'axios';
export default {
  data() {
    return {
      imageUrl: '',
      giaodata:'',
      user: {
        name: "",
        age: "",
        gender: "",
        email: "",
        phone:"",
        signature:"",
        address1:"",
        address2:"",
      },
      ruleForm: {
        name: "",
        age: '',
        gender: "",
        email: "",
        phone:"",
        signature:"",
        address1:"",
        address2:"",
      },
      rules: {
          name: [
            { required: true, message: '相关信息不能为空', trigger: 'blur' },
          ]
      },
      showModal: false,
    };
    
  }, 
  methods: {
      back(){
        this.$router.push('/navi')
      },
      exit(){
        localStorage.removeItem('imgpath')
        localStorage.removeItem('useinfo')
      },
      change(){
        this.showModal=false
        const data = this.ruleForm
        this.user =data
        console.log(data);
        //存储到本地缓存
        localStorage.setItem('useinfo', JSON.stringify(data))
        axios.post('http://localhost:3000/info',data)
            .then(res=>{
                console.log(res)
            })
            .catch(error=>{
                console.log(error)
            }) 
      },
      open() {
        this.showModal=true;
      },
      handleFileChange(e) {
        const file = e.target.files[0]
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = e => {
        const giao = e.target.result
        //存储到本地缓存
        localStorage.setItem('imgpath', giao)
        this.imageUrl = giao
        }
        // 创建 FormData 对象用于存储文件和其他参数
         const formData = new FormData()
        formData.append('avatar', file)

        // 发送 post 请求上传文件
        axios.post('http://localhost:3000/img', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(resp => {
          const path =resp.data.uploadDir
          console.log(path)
          //localStorage.setItem('imgpath', path)
        }).catch(error => {
          console.log('上传失败', error.response.data)
        }) 
    },
    },
    created(){
        const userInfoString = localStorage.getItem('useinfo')
        const userInfo = JSON.parse(userInfoString)
        const imgdata = localStorage.getItem('imgpath')
        this.user.name = userInfo.name
        this.user.age  = userInfo.age
        this.user.gender = userInfo.gender
        this.user.email = userInfo.email
        this.user.phone = userInfo.phone
        this.user.signature = userInfo.signature
        this.user.address1  = userInfo.address1
        this.user.address2 = userInfo.address2
        this.imageUrl=imgdata
    }
  }
</script>
  
<style>
#information{
    width: 950px;
    height: 800px;
    margin: auto;
    background-color:whitesmoke;
}
#info{
    width: 950;
    height: 600px;
}
#player{
    width: 750px;
    margin: auto;
    text-align: left;
}
.modal {
  margin: auto;
  position: relative;
  bottom: 600px;
  width: 800px;
  height: 800px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  width: 550px;
  height: 550px;
  margin: auto;
  padding: 20px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>
  